<!--  -->
<template>
  <div
    class="loading-box"
    v-loading="!countFlag"
    element-loading-background="rgba(0, 0, 0, 0.1)"
  >
    <div v-if="countFlag" class="rescue-count animate__animated animate__fadeInLeft">
      <!-- 标题 -->
      <div class="rescue-top">
        <!-- <dv-decoration-11 class="dv-11"
        ><span>电梯应急救援统计</span></dv-decoration-11
      >
      <div class="go-index">
        <p @click="$router.push('/')">
          <i class="el-icon-upload2"></i><span>综合大屏</span>
        </p>
      </div> -->
        <CountTop :revTitle="'电梯应急救援统计'"></CountTop>
      </div>
      <!-- main -->
      <div class="rescue-main">
        <!-- 1/3 -->
        <div class="rescue-box">
          <div class="rescue-chart">
            <PublicEcharts
              :option="this.getThreeMonKEleListOP"
              :title="'近三月发生困人故障最多使用单位统计'"
              :id="'rescueUnit1'"
              ref="rescueUnit1"
            ></PublicEcharts>
          </div>
          <div class="rescue-chart">
            <PublicEcharts
              :option="this.getThreeMonBrandListOP"
              :title="'近三个月故障最高电梯品牌统计'"
              :id="'getThreeMonBrandListOP1'"
              ref="getThreeMonBrandListOP1"
            ></PublicEcharts>
          </div>
        </div>
        <!-- 2/3 -->
        <div class="rescue-box rescue-full">
          <div class="rescue-chart rescue-chart-full">
            <div class="rescue-chart-title">
              <span>近三月应急处置按场所统计</span>
            </div>
            <div class="rescue-chart-box">
              <div class="rescue-table">
                <ul>
                  <li>
                    <span>使用场所性质</span>
                    <span>应急处置量</span>
                  </li>
                  <li v-for="(item, i) in placecType" :key="i">
                    <span>{{ item.name }}</span>
                    <span>{{ item.total }}</span>
                  </li>
                </ul>
              </div>
              <div class="rescue-table">
                <PublicEcharts
                  :option="this.getThreeMonAreaListOP"
                  :title="''"
                  :id="'getThreeMonAreaListOP12'"
                  ref="getThreeMonAreaListOP12"
                ></PublicEcharts>
              </div>
            </div>
          </div>
          <div class="rescue-chart rescue-chart-full">
            <PublicEcharts
              :option="this.getEleGzInfoListOP"
              :title="'近12月电梯故障趋势'"
              :id="'getEleGzInfoListOP1'"
              ref="getEleGzInfoListOP1"
            ></PublicEcharts>
          </div>
        </div>
        <!-- 3/3 -->
        <div class="rescue-box">
          <div class="rescue-chart">
            <PublicEcharts
              :option="this.getThreeMonKWEleListOP"
              :title="'近三月发生困人故障最多维保单位统计'"
              :id="'getThreeMonKWEleListOP1'"
              ref="getThreeMonKWEleListOP1"
            ></PublicEcharts>
          </div>
          <div class="rescue-chart">
            <PublicEcharts
              :option="this.getThreeMonEleTypeListOP"
              :title="'近三个月故障电梯类型统计'"
              :id="'getThreeMonEleTypeListOP1'"
              ref="getThreeMonEleTypeListOP1"
            ></PublicEcharts>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PublicEcharts from "../components/charts/PublicEcharts";
import CountTop from "../components/container/CountTop";
import {
  getTopThree,
  getRescuePie,
  getRescueBar,
  getRescueBarHori,
  getRescueLine,
} from "../utils/chartOption/rescueCountOption";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { PublicEcharts, CountTop },

  //父组件传入子组件数据
  props: {},

  //格式化数据
  filters: {},

  data() {
    //这里存放数据
    return {
      countFlag: false,
      getThreeMonKEleListOP: null, // 三月故障单位...
      getThreeMonBrandListOP: null, // 电梯品牌...
      getThreeMonAreaListOP: null, // 场所类型...
      placecType: null,             // 场所类型
      getEleGzInfoListOP: null, // 12个月...
      getThreeMonKWEleListOP: null, // 困人维保单位...
      getThreeMonEleTypeListOP: null, // 三月故障电梯类型...
    };
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init();
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},

  //方法集合
  methods: {
    async init() {
      let apis = [
        { key: "getThreeMonKEleList", methed: getRescueBar }, // 三月故障单位...
        { key: "getThreeMonBrandList", methed: getRescueBarHori }, // 电梯品牌...
        { key: "getThreeMonAreaList", methed: getRescuePie }, // 场所类型...
        { key: "getEleGzInfoList", methed: getRescueLine }, // 12个月...
        { key: "getThreeMonKWEleList", methed: getRescueBar }, // 困人维保单位...
        { key: "getThreeMonEleTypeList", methed: getRescuePie }, // 三月故障电梯类型...
      ];
      let that = this;
      for (let i = 0; i < apis.length; i++) {
        const ele = apis[i].key;
        let methed = apis[i].methed;

        let ret = await this.$http[ele]();

        if (ret.data.errorCode != 0) {
          that.$message({
            showClose: true,
            message: "系统忙！",
            type: "error",
          });
          this.$router.push('/')
          return;
        }

        if (ele == 'getThreeMonAreaList') {
          that.placecType = ret.data.data
          console.log(that.placecType);
        }

        if (methed) {
          let arr = that.formatArr(ret.data.data);
          that[ele + "OP"] = methed(arr);
        } else {
          that[ele] = ret.data.data;
        }
      }
      this.countFlag = true;
    },

    formatArr(data) {
      let arr = { types: [], data: [] };
      data.forEach((ele) => {
        arr.types.push(ele.name);
        arr.data.push(ele.total);
      });
      return arr;
    },
  },
};
</script>

<style scoped lang='less'>
/* 使用$符号可以标识一个变量;@import url(); 引入公共css类 */
.loading-box {
  width: 100%;
  height: 100%;
}
.rescue-count {
  width: 100%;
  height: 100%;
  animation-duration: 0.4s;
  .rescue-top {
    width: 100%;
    height: 10%;
  }
  .rescue-main {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    .rescue-box {
      width: 25%;
      height: 99%;
      box-sizing: border-box;
      border: 2px solid @Blue;
      border-radius: 0.08rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      .rescue-chart {
        width: 98%;
        height: 48%;
        background-color: rgba(77, 144, 254, 0.1);
      }
      .rescue-chart.rescue-chart-full {
        display: flex;
        flex-direction: column;
        .rescue-chart-title {
          width: 100%;
          height: 14%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.22rem;
          color: @FontColor;
          font-weight: 700;
        }
        .rescue-chart-box {
          width: 100%;
          height: 86%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .rescue-table {
            width: 49.5%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            ul {
              width: 90%;
              height: 90%;
              display: flex;
              flex-direction: column;
              box-sizing: border-box;
              background-color: @ListTrBgColor;
              li {
                width: 100%;
                flex: 1;
                display: flex;
                box-sizing: border-box;
                span {
                  display: flex;
                  width: 50%;
                  height: 100%;
                  justify-content: center;
                  align-items: center;
                  font-size: 0.18rem;
                  color: @ListHeadBgColor;
                  box-sizing: border-box;
                  border: 1px solid #ccc;
                }
              }
              li:first-child {
                background-color: @ListHeadBgColor;
                span {
                  color: @ListTrBgColor;
                }
              }
            }
          }
        }
      }
    }
    .rescue-box.rescue-full {
      width: 48%;
    }
  }
}
</style>